<template>
  <!-- headroom原理：slideDown时`top: -100px;` && slideUp时`top: 0;` -->
  <!-- <header
    id="nav-headroom-scroll"
    class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar header--fixed "
  >
    <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="36"
        height="36"
        class="d-block"
        viewBox="0 0 612 612"
        role="img"
        focusable="false"
      >
        <title>Bootstrap</title>
        <path
          fill="currentColor"
          d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"
        />
        <path
          fill="currentColor"
          d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"
        />
      </svg>
    </a>

    <div class="navbar-nav-scroll">
      <ul class="navbar-nav bd-navbar-nav flex-row">
        <li class="nav-item" v-for="(item, i) in aHeaderLink" :key="i">
          <router-link class="nav-link" :to="item.link">{{item.text}}</router-link>
        </li>
      </ul>
    </div>

    <ul class="navbar-nav ml-md-auto">
      <li class="nav-item dropdown">
        <a
          class="nav-item nav-link dropdown-toggle mr-md-2"
          href="#"
          id="bd-versions"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >v4.5</a>
        <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
          <a class="dropdown-item active" href="https://v4.bootcss.com/">最新版本 v4</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="https://v3.bootcss.com/" target="_blank">v3 版本</a>
          <a class="dropdown-item" href="https://v2.bootcss.com/" target="_blank">v2 版本</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="/docs/versions/">所有版本</a>
        </div>
      </li>

      <li class="nav-item">
        <a
          class="nav-link pl-2 pr-1 mx-1 py-3 my-n2"
          href="https://github.com/twbs"
          target="_blank"
          rel="noopener"
          aria-label="GitHub"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="navbar-nav-svg hw-16"
            viewBox="0 0 512 499.36"
            role="img"
            focusable="false"
          >
            <title>GitHub</title>
            <path
              fill="currentColor"
              fill-rule="evenodd"
              d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"
            />
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link px-1 mx-1 py-3 my-n2"
          href="https://twitter.com/getbootstrap"
          target="_blank"
          rel="noopener"
          aria-label="Twitter"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="navbar-nav-svg hw-16"
            viewBox="0 0 512 416.32"
            role="img"
            focusable="false"
          >
            <title>Twitter</title>
            <path
              fill="currentColor"
              d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"
            />
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link px-1 mx-1 py-3 my-n2"
          href="https://bootstrap-slack.herokuapp.com/"
          target="_blank"
          rel="noopener"
          aria-label="Slack"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="navbar-nav-svg hw-16"
            viewBox="0 0 512 512"
            role="img"
            focusable="false"
          >
            <title>Slack</title>
            <path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z" />
            <path
              fill="currentColor"
              d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"
            />
          </svg>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link px-1 mx-1 py-3 my-n2"
          href="https://opencollective.com/bootstrap/"
          target="_blank"
          rel="noopener"
          aria-label="Open Collective"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            fill-rule="evenodd"
            class="navbar-nav-svg hw-16"
            viewBox="0 0 40 41"
            role="img"
            focusable="false"
          >
            <title>Open Collective</title>
            <path
              fill-opacity="0.4"
              d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"
            />
            <path
              d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"
            />
          </svg>
        </a>
      </li>
    </ul>

    <a
      class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3"
      href="/docs/getting-started/download/"
    >下载 Bootstrap</a>
  </header> -->

  <header>
    <!--    class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar header--fixed " -->
    <!-- navbar navbar-gitlab qa-navbar navbar-expand-sm js-navbar" -->
  </header>
  <header id="nav-headroom-scroll" class="navbar">
    <div class="container-fluid">
      <div class="header-content" :class="{ 'menu-expanded': true }">
        <!-- header of left -->
        <div class="title-container">
          <!-- 隐藏,针对于SEO优化 -->
          <h1 hidden>GitLab Pages</h1>
          <!-- svg title -->
          <div class="title">
            <a title="Dashboard" class="flex" id="logo" href="/gitlab.html">
              <svg width="24" height="24" class="tanuki-logo" viewBox="0 0 36 36">
                <path
                  class="tanuki-shape tanuki-left-ear"
                  fill="#e24329"
                  d="M2 14l9.38 9v-9l-4-12.28c-.205-.632-1.176-.632-1.38 0z"
                />
                <path
                  class="tanuki-shape tanuki-right-ear"
                  fill="#e24329"
                  d="M34 14l-9.38 9v-9l4-12.28c.205-.632 1.176-.632 1.38 0z"
                />
                <path
                  class="tanuki-shape tanuki-nose"
                  fill="#e24329"
                  d="M18,34.38 3,14 33,14 Z"
                />
                <path
                  class="tanuki-shape tanuki-left-eye"
                  fill="#fc6d26"
                  d="M18,34.38 11.38,14 2,14 6,25Z"
                />
                <path
                  class="tanuki-shape tanuki-right-eye"
                  fill="#fc6d26"
                  d="M18,34.38 24.62,14 34,14 30,25Z"
                />
                <path
                  class="tanuki-shape tanuki-left-cheek"
                  fill="#fca326"
                  d="M2 14L.1 20.16c-.18.565 0 1.2.5 1.56l17.42 12.66z"
                />
                <path
                  class="tanuki-shape tanuki-right-cheek"
                  fill="#fca326"
                  d="M34 14l1.9 6.16c.18.565 0 1.2-.5 1.56L18 34.38z"
                />
              </svg>

              <span class="logo-text d-none d-lg-block prepend-left-8">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 617 169">
                  <path
                    d="M315.26 2.97h-21.8l.1 162.5h88.3v-20.1h-66.5l-.1-142.4M465.89 136.95c-5.5 5.7-14.6 11.4-27 11.4-16.6 0-23.3-8.2-23.3-18.9 0-16.1 11.2-23.8 35-23.8 4.5 0 11.7.5 15.4 1.2v30.1h-.1m-22.6-98.5c-17.6 0-33.8 6.2-46.4 16.7l7.7 13.4c8.9-5.2 19.8-10.4 35.5-10.4 17.9 0 25.8 9.2 25.8 24.6v7.9c-3.5-.7-10.7-1.2-15.1-1.2-38.2 0-57.6 13.4-57.6 41.4 0 25.1 15.4 37.7 38.7 37.7 15.7 0 30.8-7.2 36-18.9l4 15.9h15.4v-83.2c-.1-26.3-11.5-43.9-44-43.9M557.63 149.1c-8.2 0-15.4-1-20.8-3.5V70.5c7.4-6.2 16.6-10.7 28.3-10.7 21.1 0 29.2 14.9 29.2 39 0 34.2-13.1 50.3-36.7 50.3m9.2-110.6c-19.5 0-30 13.3-30 13.3v-21l-.1-27.8h-21.3l.1 158.5c10.7 4.5 25.3 6.9 41.2 6.9 40.7 0 60.3-26 60.3-70.9-.1-35.5-18.2-59-50.2-59M77.9 20.6c19.3 0 31.8 6.4 39.9 12.9l9.4-16.3C114.5 6 97.3 0 78.9 0 32.5 0 0 28.3 0 85.4c0 59.8 35.1 83.1 75.2 83.1 20.1 0 37.2-4.7 48.4-9.4l-.5-63.9V75.1H63.6v20.1h38l.5 48.5c-5 2.5-13.6 4.5-25.3 4.5-32.2 0-53.8-20.3-53.8-63-.1-43.5 22.2-64.6 54.9-64.6M231.43 2.95h-21.3l.1 27.3v94.3c0 26.3 11.4 43.9 43.9 43.9 4.5 0 8.9-.4 13.1-1.2v-19.1c-3.1.5-6.4.7-9.9.7-17.9 0-25.8-9.2-25.8-24.6v-65h35.7v-17.8h-35.7l-.1-38.5M155.96 165.47h21.3v-124h-21.3v124M155.96 24.37h21.3V3.07h-21.3v21.3"
                  ></path>
                </svg>
              </span>
            </a>
          </div>
        </div>
        <!-- header of right -->
        <div class="navbar-collapse collapse"></div>
      </div>
      <nav class="nav">
        <a href="">首页</a>
        <a href="">服务</a>
        <a href="">关于我们</a>
      </nav>
      <div
        class="nav-item header-user dropdown"
        data-track-event="click_dropdown"
        data-track-label="profile_dropdown"
      >
        <a class="header-user-dropdown-toggle" data-toggle="dropdown" href="/haosonglin"
          ><img
            width="23"
            height="23"
            class="header-user-avatar qa-user-avatar js-lazy-loaded qa-js-lazy-loaded"
            src="/uploads/-/system/user/avatar/19/avatar.png?width=23"
          />
          <svg class="caret-down">
            <use
              xlink:href="/icons.svg#angle-down"
            ></use>
          </svg>
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <ul>
            <li class="current-user">
              <div class="user-name bold">haosonglin</div>
              @haosonglin
            </li>
            <li class="divider"></li>
            <li>
              <button type="button" class="btn menu-item">Set status</button>
            </li>
            <li>
              <a class="profile-link" data-user="haosonglin" href="/haosonglin"
                >Profile</a
              >
            </li>
            <li>
              <a href="/profile">Settings</a>
            </li>
            <li class="divider"></li>
            <li>
              <a class="sign-out-link" href="/users/sign_out">Sign out</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </header>
  <div class="seize-seat">
    <!-- 占位 -->
  </div>
  <router-view />
</template>

<script lang="ts">
import { defineComponent, ref, provide, reactive } from "vue";
import { ThemeSymbol, ThemeSymbolRef } from "@/utils/constant";
export default defineComponent({
  name: "App",
  setup() {
    provide(ThemeSymbol, "dark");
    provide(ThemeSymbolRef, ref("dark"));
    const aHeaderLink = reactive([
      {
        link: "/",
        text: "首页",
      },
      {
        link: "/c-api",
        text: "Composition API",
      },
      {
        link: "/profile",
        text: "个人中心",
      },
    ]);
    return { aHeaderLink };
  },
});
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
}

a.nav-link {
  &.router-link-active {
    // color: #42b983;
    font-weight: 600;
    color: #fff !important;
    background-color: transparent;
  }
}

.hw-16 {
  height: 16px;
  width: 16px;
}

.bd-navbar {
  min-height: 4rem;
  background-color: #7952b3;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-bd-download {
  font-weight: 600;
  color: #ffe484;
  border-color: #ffe484;
}

.seize-seat {
  min-height: 4rem;
  width: 100%;
}

.caret-down {
    top: 0;
    height: 11px;
    width: 11px;
    margin-left: 4px;
    fill: currentColor;
}
.nav {
  // 向右靠齐
  margin-left: auto;
  gap: 1rem;
}
</style>
